<template>
  <div class="chart-container">
    <v-chart class="echarts" :option="option" autoresize />
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api'
import barStackOption from '../options/barStackOption'
export default {
  setup() {
    const option = reactive(barStackOption)
    const data = [
      {
        name: '北京银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      },
      {
        name: '上海银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      },
      {
        name: '江苏银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      },
      {
        name: '宁波银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      },
      {
        name: '南京银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      },
      {
        name: '成都银行',
        public: {
          '2021Q1': +(Math.random() * 20000).toFixed(2),
          '2021Q2': +(Math.random() * 20000).toFixed(2),
          '2021Q3': +(Math.random() * 20000).toFixed(2),
          '2021Q4': +(Math.random() * 20000).toFixed(2),
          '2022Q1': +(Math.random() * 20000).toFixed(2)
        },
        retail: {
          '2021Q1': +(Math.random() * 5000).toFixed(2),
          '2021Q2': +(Math.random() * 5000).toFixed(2),
          '2021Q3': +(Math.random() * 5000).toFixed(2),
          '2021Q4': +(Math.random() * 5000).toFixed(2),
          '2022Q1': +(Math.random() * 5000).toFixed(2)
        }
      }
    ]
    data.forEach((item, i) => {
      const index1 = i
      const index2 = data.length + i
      option.legend.data[index1] = `${item.name}-对公占比`
      option.legend.data[index2] = `${item.name}-零售占比`

      const data1 = []
      for (const i in item.public) {
        data1.push(item.public[i])
      }
      const data2 = []
      for (const i in item.retail) {
        data2.push(item.retail[i])
      }
      option.series[index1] = {
        name: `${item.name}-对公占比`,
        type: 'bar',
        barGap: 0,
        stack: item.name,
        label: {
          show: true,
          fontSize: 8,
          formatter({ value, dataIndex }) {
            return ((value / (value + data2[dataIndex])) * 100).toFixed(1) + '%'
          }
        },
        data: data1
      }

      option.series[index2] = {
        name: `${item.name}-零售占比`,
        type: 'bar',
        barGap: 0,
        stack: item.name,
        label: {
          show: true,
          fontSize: 8,
          formatter({ value, dataIndex }) {
            return ((value / (value + data1[dataIndex])) * 100).toFixed(1) + '%'
          }
        },
        data: data2
      }
    })
    option.color = [
      '#ff791a',
      '#7b5ccc',
      '#af8b00',
      '#ffc559',
      '#3bac48',
      '#3f84d0',
      '#ffcaa3',
      '#bdade5',
      '#dfd199',
      '#ffe8bd',
      '#b1deb6',
      '#c5daf0'
    ]
    option.xAxis.data = ['2021Q1', '2021Q2', '2021Q3', '2021Q4', '2022Q1']
    return {
      option
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  overflow-x: auto;
}
.echarts {
  min-width: 759px;
  height: 280px;
}
</style>
